<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- watch可以用来对数据进行监听，只要数据改变了，就会触发相应的函数 -->
      <!-- 相应的函数可以接受两个参数，分别是改变后的值和改变前的值 -->
      <!-- 函数里面允许使用异步和dom操作 -->

      <!-- 默认情况下我们不能深度监听， deep: true -->
      <!-- 默认情况下不会直接调用监听函数， immediate: true, -->
      <!-- 默认情况下函数会在页面渲染完之前调用，flush: post -->

      <!-- vue3中新增了this.$watch(),作用让我们可以开启和结束监听 -->
      <h2>watch侦听器</h2>
      <p id="count">count: {{ count }}</p>
      <button @click="count++">btn</button>

      <hr />

      <input type="text" v-model="value" />

      <hr />

      <h2>点分隔符的路径</h2>
      <p>obj: {{ obj }}</p>
      <button @click="obj.a = 30">btn</button>

      <hr />

      <h2>监听对象</h2>
      <p id="pp">obj2: {{ obj2 }}</p>
      <button @click="obj2.x = 100">改变obj2</button>

      <hr />

      <h2>$watch</h2>
      <p>num: {{ num }}</p>
      <button @click="num++">num++</button>
      <button @click="start">开始对num进行监听</button>
      <button @click="stop">结束对num进行监听</button>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      let unwatch;

      createApp({
        data() {
          return {
            count: 1,
            value: "",
            list: [],
            obj: {
              a: 3,
              b: 4,
            },
            obj2: {
              x: 10,
              y: 20,
            },
            num: 2,
          };
        },
        // created() {
        //   // this.$watch的写法是vue3新增的
        //   this.$watch("num", (val) => {
        //     console.log("num改变成了" + val);
        //   });
        // },
        // beforeUpdate() {
        //   console.log("11111");
        // },
        watch: {
          // count(val, oldVal) {
          //   // setTimeout(() => {
          //   console.log("count改变了", val, oldVal);
          //   // }, 1000);
          // },
          count: {
            handler(val) {
              console.log("count", val);
              console.log("inner", document.querySelector("#count").innerHTML);
            },
            // handler函数就会在页面渲染完以后再触发
            flush: "post",
          },
          value(val) {
            console.log("输入框的内容改变了", val);
          },
          // 点分隔符的路径
          "obj.a"() {
            console.log("a属性改变了");
          },
          // obj2(val) {
          //   console.log("obj2被改成了" + val);
          // },
          obj2: {
            handler(val) {
              console.log(val);
            },
            // 深度监听
            deep: true,
            // 强制立即执行回调
            // 进入页面先做一次
            immediate: true,
          },
        },
        methods: {
          start() {
            console.log("监听开始了");
            unwatch = this.$watch("num", (val) => {
              console.log("num改变成了" + val);
            });
          },
          stop() {
            console.log("监听结束了");
            unwatch();
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
